<template>
  <view class="template-product tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
   <!-- <tn-nav-bar fixed customBack :bottomShadow="false" backgroundColor="#FFFFFF">
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar> -->
    
    <view class="tn-margin-top tn-margin-bottom">
      <swiper class="card-swiper" :circular="true"
        :autoplay="true" duration="500" interval="5000" @change="cardSwiper"> 
        <swiper-item v-for="(item,index) in swiperList" :key="index">
          <view class="swiper-item image-banner">
            <image :src="item.url" mode="widthFix"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    
    
    <view class="tn-padding-bottom-xl">

      <view>
		  <view class="tn-margin tn-text-center" v-show="!courses.length">
		  	<image src="https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/icons/no.png" mode="widthFix" class="no-data"></image>
		  	<view class="no">
		  		暂无数据
		  	</view>
		  </view>
        <view class="tn-margin" v-for="(item,index) in courses" :key="index">
          <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-sm website-shadow" @click="tn('/pages/detail/detail?id='+item._id)">
            <view class="justify-content-item tn-flex-10">
              <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                <view class="">
                  <view class="">
					  <image :src="item.avatar.url" mode="widthFix" style="width: 80px"></image>
                  </view>
                </view>
                <view class="tn-padding-right tn-color-black">
                  <view class="tn-padding-left-sm tn-text-md tn-text-bold">
                    {{item.title}}
                  </view>
                  <view class="tn-text-sm tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm">
                    {{item.content}}
                  </view>
                </view>
              </view>
            </view>
            <view class="justify-content-item tn-flex-row-center tn-flex-2">
              <view class="tn-cool-bg-color-15 tn-padding-xs tn-color-white tn-text-center tn-round tn-shadow-blur">
                <text class="tn-text-sm">去学习</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>  
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  const pageDataCenter=uniCloud.importObject('page-data-center')
  export default {
    name: 'TemplateProduct',
    mixins: [template_page_mixin],
    data(){
      return {
        cardCur: 0,
		courses:[],
        swiperList: [{
          id: 0,
          url: 'https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/example/11.jpg',
        }, {
          id: 1,
          url: 'https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/example/23.jpg',
        }],
        current: 0
      }
    },
	onLoad() {
		let params=uni.getStorageSync('params')
		this.getData(params)
	},
    methods: {
		getData(params={}){
			pageDataCenter.getCourseAll(params).then((res)=>{
				console.log(res)
				this.courses=res.data
			})
		},
      // cardSwiper
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
      // tab选项卡切换
      tabChange(index) {
        this.current = index
      },
      getRandomCoolBg() {
        return this.$t.colorUtils.getRandomCoolBgClass()
      },
	  goBack(){
		  uni.navigateBack()
	  }
    }
  }
</script>

<style lang="scss" scoped>
	@import 'course.scss';
	.no-data{
		width: 200px;
		margin: 0 auto;
	}
</style>
